<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jstl/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:a4j="http://richfaces.org/a4j">
      
  <ui:composition>
  
    <f:loadBundle basename="com.copractice.web.messages" var="msg"/>

    <rich:panel bodyClass="rich-laguna-panel-no-header" styleClass="upload-area">
      XML File Upload Area. TO DO: To be implemented.
    </rich:panel>
    <a4j:form>  
      <a4j:jsFunction name="changeDifficultyLevel" action="#{create.setDifficultyValue}" reRender="difficultyPanel" >  
        <a4j:actionparam name="param1" assignTo="#{create.star}"/>  
      </a4j:jsFunction>  
    </a4j:form>                      
    
    <a4j:form id="createQuestionForm">    
      <rich:panel id="errorMessagePanel" bodyClass="rich-laguna-panel-no-header error-area" styleClass="error-area">
        <a4j:outputPanel ajaxRendered="true" id="errorMessage" layout="block" styleClass="errorMessage error-area">
          <h:messages id="errorMessages2"/>
        </a4j:outputPanel>                    
      </rich:panel>    
    
      <h:panelGrid styleClass="create-question-datatable" border="1" columns="2" 
                   columnClasses="create-question-datatable-columns">
        <rich:panel bodyClass="rich-laguna-panel-no-header create-question-panel" styleClass="create-question-panel-2">
        <h:panelGrid styleClass="create-question-datatable" border="0" columns="1">
          <h:outputText value="#{msg['create.question_text']}" />
          <h:inputTextarea id="questionText" rows="10" cols="48" value="#{create.questionText}" />
          <h:outputText value=""/>
          <h:outputText value="#{msg['create.correct_answer']}"/>
          <h:inputText size="60" value="#{create.rightAnswer}"/>    
          <h:outputText value="#{msg['create.incorrect_answers']}"/>
          <h:inputText size="60" value="#{create.incorrectAnswer1}"/>
          <h:inputText size="60" value="#{create.incorrectAnswer2}"/>
          <h:inputText size="60" value="#{create.incorrectAnswer3}"/>
        </h:panelGrid>
        </rich:panel>
        
        <rich:panel bodyClass="rich-laguna-panel-no-header" styleClass="create-question-panel-2">
          <h:panelGrid styleClass="create-question-datatable" border="0" columns="1">
            <h:selectOneMenu id="category" value="#{create.selectedCategoryId}" immediate="true">
              <f:selectItems value="#{create.categories}"/>
            </h:selectOneMenu>
            
            <h:panelGrid border="0" columns="2" styleClass="create-question-panel-2">
              <h:outputText value="#{msg['create.or']} &nbsp;"/><h:inputText value="#{create.newCategory}" size="30"/>
            </h:panelGrid>
            
            <a4j:outputPanel layout="inline" ajaxRendered="true" id="difficultyPanel" styleClass="difficulty-stars">
                <h:outputText value="#{msg['create.rate_difficulty']}"/>:
                <h:graphicImage id="star1" value="#{create.star1}" styleClass="diff_el" onclick="changeDifficultyLevel(1);return false;"/>
                <h:graphicImage id="star2" value="#{create.star2}" styleClass="diff_el" onclick="changeDifficultyLevel(2);return false;"/>
                <h:graphicImage id="star3" value="#{create.star3}" styleClass="diff_el" onclick="changeDifficultyLevel(3);return false;"/>
                <h:graphicImage id="star4" value="#{create.star4}" styleClass="diff_el" onclick="changeDifficultyLevel(4);return false;"/>
                <h:graphicImage id="star5" value="#{create.star5}" styleClass="diff_el" onclick="changeDifficultyLevel(5);return false;"/>
                <h:inputHidden value="#{create.difficulty}"/>
            </a4j:outputPanel>
            
            <h:inputTextarea cols="48" rows="16" value="#{create.defaultHint}"/><br/><br/>
            
          </h:panelGrid>
        </rich:panel>
      </h:panelGrid>
      <rich:panel bodyClass="rich-laguna-panel-no-header" styleClass="create-question-panel-3">
        <a4j:commandButton value="#{msg['create.create_new_question']}" action="#{create.createNewQuestion}"
                           reRender="errorMessage"/>
      </rich:panel>        
    </a4j:form>
  </ui:composition>
  
</html>